<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./css/index.css" />
    <link
      rel="stylesheet"
      href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
    />
    <title>Document</title>
    <style>
      #main1 {
        /* width: 400px;
        height: 400px; */
        /* margin: auto; */
      }
      .wh{
        width: 400px;
        height: 400px;
        margin: auto;
      }
    </style>
  </head>

  <body>
    <div id="app">
      <el-container>
        <el-row>
          <el-col :span="12"
            ><div class="grid-content bg-purple">
              <div id="main1" class="wh"></div>
            </div>
          </el-col>
          <el-col :span="12"
            ><div class="grid-content bg-purple-light">
                <div id="main2" class="wh"></div>
            </div>
          </el-col>
          <el-col :span="12"
            ><div class="grid-content bg-purple-light">
                <div id="main3" class="wh"></div>
            </div>
          </el-col>
          <el-col :span="12"
            ><div class="grid-content bg-purple-light">
                <div id="main4" class="wh"></div>
            </div>
          </el-col>
        </el-row>
      </el-container>
      <el-footer>
        <div class="button_fa">
          <el-button class="mr-20" type="info" @click="downloadPdf"
            >下载PDF</el-button
          >
          <el-button type="danger" @click="close">关闭页面</el-button>
        </div>
      </el-footer>

    </div>
    <script src="js/jspdf.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="js/echarts.min.js"></script>
    <script src="js/Dcharts.js"></script>
    <script src="js/common.js"></script>
    <script>
      const vue = new Vue({
        el: '#app',
        data: {
          d1: {
            2012: "86.5",
            2013: "92.1",
            2014: "85.7",
            2015: "8",
          },
          d2: {
            2012: 41.1,
            2013: 30.4,
            2014: 65.1,
            2015: 53.3,
          },
          d3: {
            2012: 21.1,
            2013: 34.4,
            2014: 90.1,
            2015: 50.3,
          },
          d4: {
            2012: 91.1,
            2013: 34.4,
            2014: 50.1,
            2015: 20.3,
          },
          data:{"西凉":"1547","益州":"510","兖州":"890","幽州":"420","荆州":"300"}
        },
        mounted() {
                let d1 = new Dcharts();
                let d2 = new Dcharts();
                let d3 = new Dcharts();
                let d4 = new Dcharts();
                try {
                    d1.drawPie('main1', this.d1, '头部数据');
                    d2.drawBar('main2',this.d2,"柱状图");
                    d3.drawBar('main3', this.d3, 'dahdahd');
                    d4.drawPie('main4',this.d4,"czcz");
                } catch (error) {
                    console.log(error);
                }
        },
        //   http://127.0.0.1:5500/Demo1.html?data={%22f1%22:[{%222012%22:%22222%22},{%222013%22:%22123%22},{%222014%22:%22100%22}],%22f2%22:[{%222012%22:%22111%22},{%222013%22:%2289%22},{%222014%22:%2290%22}],%22f3%22:[{%222012%22:%22333%22},{%222013%22:%2244%22},{%222014%22:%2222%22}]}
        methods: {
          getUrldata(name) {
            return utils.getUrldata(name)
          },
          downloadPdf() {
            window.print()
          },
          close() {
            window.location.href = 'about:blank';
            window.close();
          },
        },
      });
    </script>
  </body>
</html>
